<html>
  <head>
    <meta charset="utf-8" />
    <title>Voice-change-O-matic</title>

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link
      href="https://fonts.googleapis.com/css?family=Righteous|Nova+Square"
      rel="stylesheet"
      type="text/css" />
    <link href="styles/normalize.css" rel="stylesheet" type="text/css" />
    <link href="styles/app.css" rel="stylesheet" type="text/css" />
    
  </head>


<body>
    <h1>测试audicontext</h1>
    <canvas id="canvas"></canvas>
    <audio
      src="/audio/sea.mp3"       controls
    ></audio>



    <script>

//document.body.addEventListener("click", initMicpthone);

document.body.onload=()=>{
  console.log('loaded ')
  initMicpthone()
}

//document.querySelector("audio").onplay=()=>{
//  init();
//}

let analyser;

function initMicpthone(){
  const audioCtx = new AudioContext();
  navigator.mediaDevices
      .getUserMedia( { audio: true })
      .then(function (stream) {
        source = audioCtx.createMediaStreamSource(stream);

      analyser = audioCtx.createAnalyser();
    // 设置窗口大小，窗口越大，分析结果越详细
    analyser.fftSize = 512;
    //data = new Uint8Array(analyser.frequencyBinCount);
    source.connect(analyser);
    analyser.connect(audioCtx.destination)
    isInit=true
    draw()
  });

}

function init()
{

const audio = document.querySelector("audio");

const audioCtx = new AudioContext();
  // 创建音频源
  const source = audioCtx.createMediaElementSource(audio);
  //const gainNode = audioCtx.createGain();
  //source.connect(gainNode);
  //gainNode.gain.value=0.05
  //gainNode.connect(audioCtx.destination);

  analyser = audioCtx.createAnalyser();
  // 设置窗口大小，窗口越大，分析结果越详细
  analyser.fftSize = 512;
  //data = new Uint8Array(analyser.frequencyBinCount);
  source.connect(analyser);
  analyser.connect(audioCtx.destination)
  isInit=true
  draw()


}


let ctx;

function drawRoundedRect(x, y, width, height, radius) {
  if (height === 0) return;
    ctx.beginPath();
    ctx.moveTo(x + radius, y);
    ctx.lineTo(x + width - radius, y);
    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
    ctx.lineTo(x + width, y + height - radius);
    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
    ctx.lineTo(x + radius, y + height);
    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
    ctx.lineTo(x, y + radius);
    ctx.quadraticCurveTo(x, y, x + radius, y);
    ctx.fill();
}


// 绘制内容
function draw() {
  const canvas = document.querySelector("canvas");
  ctx = canvas.getContext("2d");
  data = new Uint8Array(analyser.frequencyBinCount);
    requestAnimationFrame(draw);
  // 清空画布
    const { width, height } = canvas;
    ctx.clearRect(0, 0, width, height);
    if (!isInit) return;
    // 把分析器节点的数据更新到data中
    analyser.getByteFrequencyData(data);
    const len = data.length;
    const barWidth = width / len;
    // 每一个方块的高度
    const blockHeight = 8;
    for (let index = 0; index < data.length; index++) {
      // 拿到本列的数值
      const _data = data[index];
      const barHeight = (_data / 255) * height;
      // 每列的横坐标
      const x = index * barWidth;
      // 每列的方块数量
      const blockCount = Math.round(barHeight / 10);
      // 循环绘制每列的小方块
      for (let number = 0; number < blockCount; number++) {
            // 设置颜色
            ctx.fillStyle = gradient[number]; //'green'
            // 每个小方块的纵坐标
            const y = height - blockHeight * number;
            // 绘制圆角矩形
            drawRoundedRect(x, y, barWidth - 1,  blockHeight - 1, 2);
        }
    }   
}



let baseColor = "hsla(240, 100%, 50%, 1)"; // 蓝色
let gradient = generateGradient(baseColor, 200); // 200种颜色

function generateGradient(baseColor,count) {
  let hsl = baseColor.match(
    /hsla?\((\d+),\s*(\d+%),\s*(\d+%),\s*([\d.]+)\)/
        );
    let h = parseInt(hsl[1], 10); // Hue
    let s = parseInt(hsl[2], 10); // Saturation
    let l = parseInt(hsl[3], 10); // Lightness
  let stepH = 360 / count;
    // 提高每个等级的亮度
    let stepL = 100 / (count + 1);
    
    let gradientColors = [];
    for (let i = 0; i < count; i++) {
          gradientColors.push(
             `hsl(${h + i * stepH}, ${s}%, ${l + i * stepL}%)`
          );
    }
  
    return gradientColors;
}






    </script>
</body>
</html>   